
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
    <link rel="stylesheet" href="demo.css">
    <link rel="stylesheet" href="iconfont.css">
</head>
<body>
    <div class="main markdown">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear">
            
                <li>
                <i class="icon iconfont icon-weixuanzhongyuanquan"></i>
                    <div class="name">未选中圆圈</div>
                    <div class="fontclass">.icon-weixuanzhongyuanquan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-31fanhui1"></i>
                    <div class="name">3.1 返回1</div>
                    <div class="fontclass">.icon-31fanhui1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-unie122"></i>
                    <div class="name">下载</div>
                    <div class="fontclass">.icon-unie122</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-bangqia"></i>
                    <div class="name">绑卡 </div>
                    <div class="fontclass">.icon-bangqia</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-z045"></i>
                    <div class="name">择律-公用-收起</div>
                    <div class="fontclass">.icon-z045</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tuichudenglu"></i>
                    <div class="name">退出登录</div>
                    <div class="fontclass">.icon-tuichudenglu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shouye-copy"></i>
                    <div class="name">首页</div>
                    <div class="fontclass">.icon-shouye-copy</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-a536"></i>
                    <div class="name">会员</div>
                    <div class="fontclass">.icon-a536</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jujue"></i>
                    <div class="name">拒绝</div>
                    <div class="fontclass">.icon-jujue</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xuanzhong"></i>
                    <div class="name">选中</div>
                    <div class="fontclass">.icon-xuanzhong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhongzhi"></i>
                    <div class="name">重置</div>
                    <div class="fontclass">.icon-zhongzhi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-cf-c09"></i>
                    <div class="name">冻结</div>
                    <div class="fontclass">.icon-cf-c09</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-calendar"></i>
                    <div class="name">日历</div>
                    <div class="fontclass">.icon-calendar</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zanting"></i>
                    <div class="name">暂停</div>
                    <div class="fontclass">.icon-zanting</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhipaisiji"></i>
                    <div class="name">指派司机</div>
                    <div class="fontclass">.icon-zhipaisiji</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-chongzhi"></i>
                    <div class="name">充值</div>
                    <div class="fontclass">.icon-chongzhi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wuuiconsuotanhao"></i>
                    <div class="name">警告</div>
                    <div class="fontclass">.icon-wuuiconsuotanhao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jizhangben"></i>
                    <div class="name">记账本</div>
                    <div class="fontclass">.icon-jizhangben</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shangjia1"></i>
                    <div class="name">上架</div>
                    <div class="fontclass">.icon-shangjia1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xiajia1"></i>
                    <div class="name">下架</div>
                    <div class="fontclass">.icon-xiajia1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fabu"></i>
                    <div class="name">发布</div>
                    <div class="fontclass">.icon-fabu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-qiyong"></i>
                    <div class="name">启用</div>
                    <div class="fontclass">.icon-qiyong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiaoshiguanli"></i>
                    <div class="name">教师管理</div>
                    <div class="fontclass">.icon-jiaoshiguanli</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-bianji"></i>
                    <div class="name">编辑</div>
                    <div class="fontclass">.icon-bianji</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xiayi"></i>
                    <div class="name">下移</div>
                    <div class="fontclass">.icon-xiayi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shangyi"></i>
                    <div class="name">上移</div>
                    <div class="fontclass">.icon-shangyi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-void"></i>
                    <div class="name">作废</div>
                    <div class="fontclass">.icon-void</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xuanzhong1"></i>
                    <div class="name">选中</div>
                    <div class="fontclass">.icon-xuanzhong1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-chakanxiangqing"></i>
                    <div class="name">查看详情</div>
                    <div class="fontclass">.icon-chakanxiangqing</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-chaxun"></i>
                    <div class="name">查询</div>
                    <div class="fontclass">.icon-chaxun</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-lajitong1"></i>
                    <div class="name">垃圾桶</div>
                    <div class="fontclass">.icon-lajitong1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-baoguofahuo"></i>
                    <div class="name">02包裹、发货</div>
                    <div class="fontclass">.icon-baoguofahuo</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-chaibaoguoqujian"></i>
                    <div class="name">03拆包裹、取件</div>
                    <div class="fontclass">.icon-chaibaoguoqujian</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shangpin"></i>
                    <div class="name">06商品</div>
                    <div class="fontclass">.icon-shangpin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhiliang"></i>
                    <div class="name">08质量</div>
                    <div class="fontclass">.icon-zhiliang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-kucun"></i>
                    <div class="name">12库存</div>
                    <div class="fontclass">.icon-kucun</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-qianshoushenpitongguo"></i>
                    <div class="name">14签收、审批通过</div>
                    <div class="fontclass">.icon-qianshoushenpitongguo</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-ziliaoshouce"></i>
                    <div class="name">22资料、手册</div>
                    <div class="fontclass">.icon-ziliaoshouce</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yewu"></i>
                    <div class="name">29业务</div>
                    <div class="fontclass">.icon-yewu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon--fuwu"></i>
                    <div class="name">37-服务</div>
                    <div class="fontclass">.icon--fuwu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shenhetongguo"></i>
                    <div class="name">审核通过</div>
                    <div class="fontclass">.icon-shenhetongguo</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xiugaimima"></i>
                    <div class="name">修改密码</div>
                    <div class="fontclass">.icon-xiugaimima</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xueshengguanli"></i>
                    <div class="name">学生管理</div>
                    <div class="fontclass">.icon-xueshengguanli</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wangluo_f"></i>
                    <div class="name">网络_f</div>
                    <div class="fontclass">.icon-wangluo_f</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jifen"></i>
                    <div class="name">积分</div>
                    <div class="fontclass">.icon-jifen</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fangda1"></i>
                    <div class="name">放大</div>
                    <div class="fontclass">.icon-fangda1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-gengduo"></i>
                    <div class="name">更多</div>
                    <div class="fontclass">.icon-gengduo</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fangda"></i>
                    <div class="name">放大</div>
                    <div class="fontclass">.icon-fangda</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhankaixiangqing"></i>
                    <div class="name">展开详情</div>
                    <div class="fontclass">.icon-zhankaixiangqing</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-refresh"></i>
                    <div class="name">刷新</div>
                    <div class="fontclass">.icon-refresh</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhishi"></i>
                    <div class="name">指示</div>
                    <div class="fontclass">.icon-zhishi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-changjing-fuben"></i>
                    <div class="name">场景 - 副本</div>
                    <div class="fontclass">.icon-changjing-fuben</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-huazhuang"></i>
                    <div class="name">酒店_赠送化妆间_32px</div>
                    <div class="fontclass">.icon-huazhuang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiangli"></i>
                    <div class="name">奖励</div>
                    <div class="fontclass">.icon-jiangli</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tongjifenxi"></i>
                    <div class="name">统计分析</div>
                    <div class="fontclass">.icon-tongjifenxi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-chaxun1"></i>
                    <div class="name">查询</div>
                    <div class="fontclass">.icon-chaxun1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-weixinzhifu"></i>
                    <div class="name">微信 支付</div>
                    <div class="fontclass">.icon-weixinzhifu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-gouwuche"></i>
                    <div class="name">购物车</div>
                    <div class="fontclass">.icon-gouwuche</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-sanx-up"></i>
                    <div class="name">三角下标（正方形）</div>
                    <div class="fontclass">.icon-sanx-up</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-ren-copy-copy"></i>
                    <div class="name">人</div>
                    <div class="fontclass">.icon-ren-copy-copy</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-iconjia"></i>
                    <div class="name">加号</div>
                    <div class="fontclass">.icon-iconjia</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-kaipiao"></i>
                    <div class="name">开票</div>
                    <div class="fontclass">.icon-kaipiao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-bohui"></i>
                    <div class="name">驳回</div>
                    <div class="fontclass">.icon-bohui</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiedong"></i>
                    <div class="name">解冻</div>
                    <div class="fontclass">.icon-jiedong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yonghu"></i>
                    <div class="name">用户</div>
                    <div class="fontclass">.icon-yonghu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-mima"></i>
                    <div class="name">密码</div>
                    <div class="fontclass">.icon-mima</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhanghaofenpei"></i>
                    <div class="name">账号分配</div>
                    <div class="fontclass">.icon-zhanghaofenpei</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-huazhuangjianyuding"></i>
                    <div class="name">化妆间预订</div>
                    <div class="fontclass">.icon-huazhuangjianyuding</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhanghuguanli"></i>
                    <div class="name">账户管理</div>
                    <div class="fontclass">.icon-zhanghuguanli</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-home_icon"></i>
                    <div class="name">home_icon1</div>
                    <div class="fontclass">.icon-home_icon</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-home_icon1"></i>
                    <div class="name">home_icon3</div>
                    <div class="fontclass">.icon-home_icon1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-home_icon2"></i>
                    <div class="name">home_icon2</div>
                    <div class="fontclass">.icon-home_icon2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-home_icon3"></i>
                    <div class="name">home_icon4</div>
                    <div class="fontclass">.icon-home_icon3</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-home_enter"></i>
                    <div class="name">home_enter</div>
                    <div class="fontclass">.icon-home_enter</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-list_close"></i>
                    <div class="name">list_close</div>
                    <div class="fontclass">.icon-list_close</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-list_open"></i>
                    <div class="name">list_open</div>
                    <div class="fontclass">.icon-list_open</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-list_right"></i>
                    <div class="name">list_right</div>
                    <div class="fontclass">.icon-list_right</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-arrow_down"></i>
                    <div class="name">arrow_down</div>
                    <div class="fontclass">.icon-arrow_down</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-arrow_up"></i>
                    <div class="name">arrow_up</div>
                    <div class="fontclass">.icon-arrow_up</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shoot"></i>
                    <div class="name">shoot</div>
                    <div class="fontclass">.icon-shoot</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dingdanshu"></i>
                    <div class="name">订单数</div>
                    <div class="fontclass">.icon-dingdanshu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-chongzhi1"></i>
                    <div class="name">充值</div>
                    <div class="fontclass">.icon-chongzhi1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-pdf"></i>
                    <div class="name">pdf</div>
                    <div class="fontclass">.icon-pdf</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-menhuguanli"></i>
                    <div class="name">门户管理</div>
                    <div class="fontclass">.icon-menhuguanli</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-close"></i>
                    <div class="name">close</div>
                    <div class="fontclass">.icon-close</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-changjing-fuben-copy"></i>
                    <div class="name">场景 - 副本</div>
                    <div class="fontclass">.icon-changjing-fuben-copy</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-baobiao"></i>
                    <div class="name">报表</div>
                    <div class="fontclass">.icon-baobiao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shensu"></i>
                    <div class="name">申诉</div>
                    <div class="fontclass">.icon-shensu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yijianfankui1"></i>
                    <div class="name">意见反馈</div>
                    <div class="fontclass">.icon-yijianfankui1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-huiyuan"></i>
                    <div class="name">会员管理</div>
                    <div class="fontclass">.icon-huiyuan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-arrLeft-fill"></i>
                    <div class="name">三角下标（正方形）</div>
                    <div class="fontclass">.icon-arrLeft-fill</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-kaipiao1"></i>
                    <div class="name">开票</div>
                    <div class="fontclass">.icon-kaipiao1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-huifu"></i>
                    <div class="name">恢复</div>
                    <div class="fontclass">.icon-huifu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-kechengguanli"></i>
                    <div class="name">课程管理</div>
                    <div class="fontclass">.icon-kechengguanli</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiudianguanli"></i>
                    <div class="name">酒店管理</div>
                    <div class="fontclass">.icon-jiudianguanli</div>
                </li>
            
        </ul>

        <h2 id="font-class-">font-class引用</h2>
        <hr>

        <p>font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。</p>
        <p>与unicode使用方式相比，具有如下特点：</p>
        <ul>
        <li>兼容性良好，支持ie8+，及所有现代浏览器。</li>
        <li>相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。</li>
        <li>因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。</li>
        <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的fontclass代码：</h3>


        <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;link rel="stylesheet" type="text/css" href="./iconfont.css"&gt;</span></code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
        <pre><code class="lang-css hljs">&lt;<span class="hljs-selector-tag">i</span> <span class="hljs-selector-tag">class</span>="<span class="hljs-selector-tag">iconfont</span> <span class="hljs-selector-tag">icon-xxx</span>"&gt;&lt;/<span class="hljs-selector-tag">i</span>&gt;</code></pre>
        <blockquote>
        <p>"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
        </blockquote>
    </div>
</body>
</html>
